<template>
  <el-popover
    ref="popover"
    placement="bottom-start"
    trigger="click"
    :width="650"
  >
    <template #reference>
      <el-input v-model="localValue" :disabled="disabled" style="width: 25%" @focus="focus">
        <template #prepend>
          <v-icon :name="localValue || ''" />
        </template>
      </el-input>
    </template>
    <el-scrollbar style="max-height: 300px; overflow: auto">
      <el-input v-model="filter" placeholder="搜索..." @focus="focus" />
      <el-row class="icon-list">
        <el-col v-for="(item, index) in elIconList.filter(each => each.indexOf(filter) !== -1)" :key="index" :span="2" @click="e => onselected(item)">
          <v-icon :class="{'icon-cell': true, 'active': item === localValue}" :name="item" />
        </el-col>
      </el-row>
    </el-scrollbar>
  </el-popover>
</template>
<script>
export default {
  name: 'VIconSelect',
  props: {
    options: {
      type: Array,
      default: () => {
        return []
      }
    },
    modelValue: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    clearable: {
      type: Boolean,
      default: false
    }
  },
  emits: ['update:modelValue'],
  data() {
    return {
      filter: '',
      showIcons: false,
      localValue: this.$props.modelValue,
      elIconList: [
        'el-icon-platform-eleme', 'el-icon-eleme', 'el-icon-delete-solid', 'el-icon-delete', 'el-icon-s-tools', 'el-icon-setting',
        'el-icon-user-solid', 'el-icon-user', 'el-icon-phone', 'el-icon-phone-outline', 'el-icon-more', 'el-icon-more-outline',
        'el-icon-star-on', 'el-icon-star-off', 'el-icon-s-goods', 'el-icon-goods', 'el-icon-warning', 'el-icon-warning-outline',
        'el-icon-question', 'el-icon-info', 'el-icon-remove', 'el-icon-circle-plus', 'el-icon-success', 'el-icon-error',
        'el-icon-zoom-in', 'el-icon-zoom-out', 'el-icon-remove-outline', 'el-icon-circle-plus-outline', 'el-icon-circle-check',
        'el-icon-circle-close', 'el-icon-s-help', 'el-icon-help', 'el-icon-minus', 'el-icon-plus', 'el-icon-check', 'el-icon-close',
        'el-icon-picture', 'el-icon-picture-outline', 'el-icon-picture-outline-round', 'el-icon-upload', 'el-icon-upload2', 'el-icon-download',
        'el-icon-camera-solid', 'el-icon-camera', 'el-icon-video-camera-solid', 'el-icon-video-camera', 'el-icon-message-solid', 'el-icon-bell',
        'ra-github', 'ra-gitlab', 'ra-git', 'ra-github1', 'ra-all', 'ra-bussiness-man', 'ra-component', 'ra-code', 'ra-copy', 'ra-dollar', 'ra-history', 'ra-editor', 'ra-data', 'ra-gift', 'ra-integral', 'ra-nav-list', 'ra-pic', 'ra-Notvisible', 'ra-play', 'ra-rising', 'ra-QRcode', 'ra-rmb', 'ra-similar-product', 'ra-Exportservices', 'ra-sendinquiry', 'ra-all-fill', 'ra-favorites-fill', 'ra-integral-fill', 'ra-namecard-fill', 'ra-pic-fill', 'ra-play-fill', 'ra-prompt-fill', 'ra-stop-fill', 'ra-column', 'ra-add-account', 'ra-column1', 'ra-add', 'ra-agriculture', 'ra-years', 'ra-add-cart', 'ra-arrow-right', 'ra-arrow-left', 'ra-apparel', 'ra-all1', 'ra-arrow-up', 'ra-ascending', 'ra-ashbin', 'ra-atm', 'ra-bad', 'ra-attachent', 'ra-browse', 'ra-beauty', 'ra-atm-away', 'ra-assessed-badge', 'ra-auto1', 'ra-bags', 'ra-calendar', 'ra-cart-full', 'ra-calculator', 'ra-cameraswitching', 'ra-cecurity-protection', 'ra-category', 'ra-close', 'ra-certified-supplier', 'ra-cart-Empty', 'ra-code1', 'ra-color', 'ra-conditions', 'ra-confirm', 'ra-company', 'ra-ali-clould', 'ra-copy1', 'ra-credit-level', 'ra-coupons', 'ra-connections', 'ra-cry', 'ra-costoms-alearance', 'ra-clock', 'ra-CurrencyConverter', 'ra-cut', 'ra-data1', 'ra-Customermanagement', 'ra-descending', 'ra-double-arro-right', 'ra-customization', 'ra-double-arrow-left', 'ra-discount', 'ra-download', 'ra-dollar1', 'ra-default-template', 'ra-editor1', 'ra-eletrical', 'ra-electronics', 'ra-etrical-equipm', 'ra-ellipsis', 'ra-email', 'ra-falling', 'ra-earth', 'ra-filter', 'ra-furniture', 'ra-folder', 'ra-feeds', 'ra-history1', 'ra-hardware', 'ra-help', 'ra-good', 'ra-Householdappliances', 'ra-gift1', 'ra-form', 'ra-image-text', 'ra-hot', 'ra-inspection', 'ra-leftbutton', 'ra-jewelry', 'ra-ipad', 'ra-leftarrow', 'ra-integral1', 'ra-kitchen', 'ra-inquiry-template', 'ra-link', 'ra-libra', 'ra-loading', 'ra-listing-content', 'ra-lights', 'ra-logistics-icon', 'ra-messagecenter', 'ra-mobile-phone', 'ra-manage-order', 'ra-move', 'ra-Moneymanagement', 'ra-namecard', 'ra-map', 'ra-Newuserzone', 'ra-multi-language', 'ra-office', 'ra-notice', 'ra-ontimeshipment', 'ra-office-supplies', 'ra-password', 'ra-Notvisible1', 'ra-operation', 'ra-packaging', 'ra-online-tracking', 'ra-packing-labeling', 'ra-phone', 'ra-pic1', 'ra-pin', 'ra-play1', 'ra-logistic-logo', 'ra-print', 'ra-product', 'ra-machinery', 'ra-process', 'ra-prompt', 'ra-QRcode1', 'ra-reeor', 'ra-reduce', 'ra-Non-staplefood', 'ra-rejected-order', 'ra-resonserate', 'ra-remind', 'ra-responsetime', 'ra-return', 'ra-paylater', 'ra-rising1', 'ra-Rightarrow', 'ra-rmb1', 'ra-RFQ-logo', 'ra-save', 'ra-scanning', 'ra-security', 'ra-salescenter', 'ra-seleted', 'ra-searchcart', 'ra-raw', 'ra-service', 'ra-share', 'ra-signboard', 'ra-shuffling-banner', 'ra-Rightbutton', 'ra-sorting', 'ra-sound-Mute', 'ra-Similarproducts', 'ra-sound-filling', 'ra-suggest', 'ra-stop', 'ra-success', 'ra-supplier-features', 'ra-switch', 'ra-survey', 'ra-template', 'ra-text', 'ra-suspended', 'ra-task-management', 'ra-tool', 'ra-Top', 'ra-smile', 'ra-textile-products', 'ra-tradealert', 'ra-topsales', 'ra-tradingvolume', 'ra-training', 'ra-upload', 'ra-RFQ-word', 'ra-viewlarger', 'ra-viewgallery', 'ra-vehivles', 'ra-trust', 'ra-warning', 'ra-warehouse', 'ra-shoes', 'ra-video', 'ra-viewlist', 'ra-set', 'ra-store', 'ra-tool-hardware', 'ra-vs', 'ra-toy', 'ra-sport', 'ra-creditcard', 'ra-contacts', 'ra-checkstand', 'ra-aviation', 'ra-Daytimemode', 'ra-infantmom', 'ra-discounts', 'ra-invoice', 'ra-insurance', 'ra-nightmode', 'ra-usercenter', 'ra-unlock', 'ra-vip', 'ra-wallet', 'ra-landtransportation', 'ra-voice', 'ra-exchangerate', 'ra-contacts-fill', 'ra-add-account1', 'ra-years-fill', 'ra-add-cart-fill', 'ra-add-fill', 'ra-all-fill1', 'ra-ashbin-fill', 'ra-calendar-fill', 'ra-bad-fill', 'ra-bussiness-man-fill', 'ra-atm-fill', 'ra-cart-full-fill', 'ra-cart-Empty-fill', 'ra-cameraswitching-fill', 'ra-atm-away-fill', 'ra-certified-supplier-fill', 'ra-calculator-fill', 'ra-clock-fill', 'ra-ali-clould-fill', 'ra-color-fill', 'ra-coupons-fill', 'ra-cecurity-protection-fill', 'ra-credit-level-fill', 'ra-default-template-fill', 'ra-CurrencyConverter-fill', 'ra-Customermanagement-fill', 'ra-discounts-fill', 'ra-Daytimemode-fill', 'ra-exl-fill', 'ra-cry-fill', 'ra-email-fill', 'ra-filter-fill', 'ra-folder-fill', 'ra-feeds-fill', 'ra-gold-supplie-fill', 'ra-form-fill', 'ra-camera-fill', 'ra-good-fill', 'ra-image-text-fill', 'ra-inspection-fill', 'ra-hot-fill', 'ra-company-fill', 'ra-discount-fill', 'ra-insurance-fill', 'ra-inquiry-template-fill', 'ra-leftbutton-fill', 'ra-integral-fill1', 'ra-help1', 'ra-listing-content-fill', 'ra-logistic-logo-fill', 'ra-Moneymanagement-fill', 'ra-manage-order-fill', 'ra-multi-language-fill', 'ra-logistics-icon-fill', 'ra-Newuserzone-fill', 'ra-nightmode-fill', 'ra-office-supplies-fill', 'ra-notice-fill', 'ra-mute', 'ra-order-fill', 'ra-password1', 'ra-map1', 'ra-paylater-fill', 'ra-phone-fill', 'ra-online-tracking-fill', 'ra-play-fill1', 'ra-pdf-fill', 'ra-phone1', 'ra-pin-fill', 'ra-product-fill', 'ra-rankinglist-fill', 'ra-reduce-fill', 'ra-reeor-fill', 'ra-pic-fill1', 'ra-rankinglist', 'ra-product1', 'ra-prompt-fill1', 'ra-resonserate-fill', 'ra-remind-fill', 'ra-Rightbutton-fill', 'ra-RFQ-logo-fill', 'ra-RFQ-word-fill', 'ra-searchcart-fill', 'ra-salescenter-fill', 'ra-save-fill', 'ra-security-fill', 'ra-Similarproducts-fill', 'ra-signboard-fill', 'ra-service-fill', 'ra-shuffling-banner-fill', 'ra-supplier-features-fill', 'ra-store-fill', 'ra-smile-fill', 'ra-success-fill', 'ra-sound-filling-fill', 'ra-sound-Mute1', 'ra-suspended-fill', 'ra-tool-fill', 'ra-task-management-fill', 'ra-unlock-fill', 'ra-trust-fill', 'ra-vip-fill', 'ra-set1', 'ra-Top-fill', 'ra-viewlarger1', 'ra-voice-fill', 'ra-warning-fill', 'ra-warehouse-fill', 'ra-zip-fill', 'ra-trade-assurance-fill', 'ra-vs-fill', 'ra-video1', 'ra-template-fill', 'ra-wallet1', 'ra-training1', 'ra-packing-labeling-fill', 'ra-Exportservices-fill', 'ra-brand-fill', 'ra-collection', 'ra-consumption-fill', 'ra-collection-fill', 'ra-brand', 'ra-rejected-order-fill', 'ra-homepage-ads-fill', 'ra-homepage-ads', 'ra-scenes-fill', 'ra-scenes', 'ra-similar-product-fill', 'ra-topraning-fill', 'ra-consumption', 'ra-topraning', 'ra-gold-supplier', 'ra-messagecenter-fill', 'ra-quick', 'ra-writing', 'ra-docjpge-fill', 'ra-jpge-fill', 'ra-gifjpge-fill', 'ra-bmpjpge-fill', 'ra-tifjpge-fill', 'ra-pngjpge-fill', 'ra-Hometextile', 'ra-home', 'ra-sendinquiry-fill', 'ra-comments-fill', 'ra-account-fill', 'ra-feed-logo-fill', 'ra-feed-logo', 'ra-home-fill', 'ra-add-select', 'ra-sami-select', 'ra-camera', 'ra-arrow-down', 'ra-account', 'ra-comments', 'ra-cart-Empty1', 'ra-favorites', 'ra-order', 'ra-search', 'ra-trade-assurance', 'ra-usercenter1', 'ra-microphone', 'ra-txt', 'ra-tradingdata', 'ra-xlsx', 'ra-banzhengfuwu', 'ra-cangku', 'ra-daibancaishui', 'ra-jizhuangxiang', 'ra-jiaobiao', 'ra-kehupandian', 'ra-dongtai', 'ra-daikuan', 'ra-shengyijing', 'ra-jiehui', 'ra-fencengpeizhi', 'ra-shenqingjilu', 'ra-shangchuanbeiandanzheng', 'ra-shangchuan', 'ra-kehuquanyi', 'ra-suoxiao', 'ra-quanyipeizhi', 'ra-shuangshen', 'ra-tongguan', 'ra-tuishui', 'ra-tongguanshuju', 'ra-kuaidiwuliu', 'ra-wuliuchanpin', 'ra-waihuishuju', 'ra-xinxibar_shouji', 'ra-xinwaizongyewu', 'ra-wuliudingdan', 'ra-zhongjianren', 'ra-xinxibar_zhanghu', 'ra-yidatong', 'ra-zhuanyequanwei', 'ra-zhanghucaozuo', 'ra-xuanzhuandu', 'ra-tuishuirongzi', 'ra-AddProducts', 'ra-ziyingyewu', 'ra-addcell', 'ra-background-color', 'ra-cascades', 'ra-beijing', 'ra-bold', 'ra-zijin', 'ra-eraser', 'ra-centeralignment', 'ra-click', 'ra-aspjiesuan', 'ra-flag', 'ra-falg-fill', 'ra-Fee', 'ra-filling', 'ra-Foreigncurrency', 'ra-guanliyuan', 'ra-language', 'ra-leftalignment', 'ra-extra-inquiries', 'ra-Italic', 'ra-pcm', 'ra-reducecell', 'ra-rightalignment', 'ra-pointerleft', 'ra-subscript', 'ra-square', 'ra-superscript', 'ra-tag-subscript', 'ra-danjuzhuanhuan', 'ra-Transfermoney', 'ra-under-line', 'ra-xiakuangxian', 'ra-shouqi', 'ra-zhankai', 'ra-tongxunlu', 'ra-yiguanzhugongyingshang', 'ra-goumaipianhao', 'ra-Subscribe', 'ra-becomeagoldsupplier', 'ra-new', 'ra-free', 'ra-cad-fill', 'ra-robot', 'ra-inspection1', 'ra-auto', 'ra-all', 'ra-bussiness-man', 'ra-component', 'ra-code', 'ra-copy', 'ra-dollar', 'ra-history', 'ra-editor', 'ra-data', 'ra-gift', 'ra-integral', 'ra-nav-list', 'ra-pic', 'ra-Notvisible', 'ra-play', 'ra-rising', 'ra-QRcode', 'ra-rmb', 'ra-similar-product', 'ra-Exportservices', 'ra-sendinquiry', 'ra-all-fill', 'ra-favorites-fill', 'ra-integral-fill', 'ra-namecard-fill', 'ra-pic-fill', 'ra-play-fill', 'ra-prompt-fill', 'ra-stop-fill', 'ra-column', 'ra-add-account', 'ra-column1', 'ra-add', 'ra-agriculture', 'ra-years', 'ra-add-cart', 'ra-arrow-right', 'ra-arrow-left', 'ra-apparel', 'ra-all1', 'ra-arrow-up', 'ra-ascending', 'ra-ashbin', 'ra-atm', 'ra-bad', 'ra-attachent', 'ra-browse', 'ra-beauty', 'ra-atm-away', 'ra-assessed-badge', 'ra-auto1', 'ra-bags', 'ra-calendar', 'ra-cart-full', 'ra-calculator', 'ra-cameraswitching', 'ra-cecurity-protection', 'ra-category', 'ra-close', 'ra-certified-supplier', 'ra-cart-Empty', 'ra-code1', 'ra-color', 'ra-conditions', 'ra-confirm', 'ra-company', 'ra-ali-clould', 'ra-copy1', 'ra-credit-level', 'ra-coupons', 'ra-connections', 'ra-cry', 'ra-costoms-alearance', 'ra-clock', 'ra-CurrencyConverter', 'ra-cut', 'ra-data1', 'ra-Customermanagement', 'ra-descending', 'ra-double-arro-right', 'ra-customization', 'ra-double-arrow-left', 'ra-discount', 'ra-download', 'ra-dollar1', 'ra-default-template', 'ra-editor1', 'ra-eletrical', 'ra-electronics', 'ra-etrical-equipm', 'ra-ellipsis', 'ra-email', 'ra-falling', 'ra-earth', 'ra-filter', 'ra-furniture', 'ra-folder', 'ra-feeds', 'ra-history1', 'ra-hardware', 'ra-help', 'ra-good', 'ra-Householdappliances', 'ra-gift1', 'ra-form', 'ra-image-text', 'ra-hot', 'ra-inspection', 'ra-leftbutton', 'ra-jewelry', 'ra-ipad', 'ra-leftarrow', 'ra-integral1', 'ra-kitchen', 'ra-inquiry-template', 'ra-link', 'ra-libra', 'ra-loading', 'ra-listing-content', 'ra-lights', 'ra-logistics-icon', 'ra-messagecenter', 'ra-mobile-phone', 'ra-manage-order', 'ra-move', 'ra-Moneymanagement', 'ra-namecard', 'ra-map', 'ra-Newuserzone', 'ra-multi-language', 'ra-office', 'ra-notice', 'ra-ontimeshipment', 'ra-office-supplies', 'ra-password', 'ra-Notvisible1', 'ra-operation', 'ra-packaging', 'ra-online-tracking', 'ra-packing-labeling', 'ra-phone', 'ra-pic1', 'ra-pin', 'ra-play1', 'ra-logistic-logo', 'ra-print', 'ra-product', 'ra-machinery', 'ra-process', 'ra-prompt', 'ra-QRcode1', 'ra-reeor', 'ra-reduce', 'ra-Non-staplefood', 'ra-rejected-order', 'ra-resonserate', 'ra-remind', 'ra-responsetime', 'ra-return', 'ra-paylater', 'ra-rising1', 'ra-Rightarrow', 'ra-rmb1', 'ra-RFQ-logo', 'ra-save', 'ra-scanning', 'ra-security', 'ra-salescenter', 'ra-seleted', 'ra-searchcart', 'ra-raw', 'ra-service', 'ra-share', 'ra-signboard', 'ra-shuffling-banner', 'ra-Rightbutton', 'ra-sorting', 'ra-sound-Mute', 'ra-Similarproducts', 'ra-sound-filling', 'ra-suggest', 'ra-stop', 'ra-success', 'ra-supplier-features', 'ra-switch', 'ra-survey', 'ra-template', 'ra-text', 'ra-suspended', 'ra-task-management', 'ra-tool', 'ra-Top', 'ra-smile', 'ra-textile-products', 'ra-tradealert', 'ra-topsales', 'ra-tradingvolume', 'ra-training', 'ra-upload', 'ra-RFQ-word', 'ra-viewlarger', 'ra-viewgallery', 'ra-vehivles', 'ra-trust', 'ra-warning', 'ra-warehouse', 'ra-shoes', 'ra-video', 'ra-viewlist', 'ra-set', 'ra-store', 'ra-tool-hardware', 'ra-vs', 'ra-toy', 'ra-sport', 'ra-creditcard', 'ra-contacts', 'ra-checkstand', 'ra-aviation', 'ra-Daytimemode', 'ra-infantmom', 'ra-discounts', 'ra-invoice', 'ra-insurance', 'ra-nightmode', 'ra-usercenter', 'ra-unlock', 'ra-vip', 'ra-wallet', 'ra-landtransportation', 'ra-voice', 'ra-exchangerate', 'ra-contacts-fill', 'ra-add-account1', 'ra-years-fill', 'ra-add-cart-fill', 'ra-add-fill', 'ra-all-fill1', 'ra-ashbin-fill', 'ra-calendar-fill', 'ra-bad-fill', 'ra-bussiness-man-fill', 'ra-atm-fill', 'ra-cart-full-fill', 'ra-cart-Empty-fill', 'ra-cameraswitching-fill', 'ra-atm-away-fill', 'ra-certified-supplier-fill', 'ra-calculator-fill', 'ra-clock-fill', 'ra-ali-clould-fill', 'ra-color-fill', 'ra-coupons-fill', 'ra-cecurity-protection-fill', 'ra-credit-level-fill', 'ra-default-template-fill', 'ra-CurrencyConverter-fill', 'ra-Customermanagement-fill', 'ra-discounts-fill', 'ra-Daytimemode-fill', 'ra-exl-fill', 'ra-cry-fill', 'ra-email-fill', 'ra-filter-fill', 'ra-folder-fill', 'ra-feeds-fill', 'ra-gold-supplie-fill', 'ra-form-fill', 'ra-camera-fill', 'ra-good-fill', 'ra-image-text-fill', 'ra-inspection-fill', 'ra-hot-fill', 'ra-company-fill', 'ra-discount-fill', 'ra-insurance-fill', 'ra-inquiry-template-fill', 'ra-leftbutton-fill', 'ra-integral-fill1', 'ra-help1', 'ra-listing-content-fill', 'ra-logistic-logo-fill', 'ra-Moneymanagement-fill', 'ra-manage-order-fill', 'ra-multi-language-fill', 'ra-logistics-icon-fill', 'ra-Newuserzone-fill', 'ra-nightmode-fill', 'ra-office-supplies-fill', 'ra-notice-fill', 'ra-mute', 'ra-order-fill', 'ra-password1', 'ra-map1', 'ra-paylater-fill', 'ra-phone-fill', 'ra-online-tracking-fill', 'ra-play-fill1', 'ra-pdf-fill', 'ra-phone1', 'ra-pin-fill', 'ra-product-fill', 'ra-rankinglist-fill', 'ra-reduce-fill', 'ra-reeor-fill', 'ra-pic-fill1', 'ra-rankinglist', 'ra-product1', 'ra-prompt-fill1', 'ra-resonserate-fill', 'ra-remind-fill', 'ra-Rightbutton-fill', 'ra-RFQ-logo-fill', 'ra-RFQ-word-fill', 'ra-searchcart-fill', 'ra-salescenter-fill', 'ra-save-fill', 'ra-security-fill', 'ra-Similarproducts-fill', 'ra-signboard-fill', 'ra-service-fill', 'ra-shuffling-banner-fill', 'ra-supplier-features-fill', 'ra-store-fill', 'ra-smile-fill', 'ra-success-fill', 'ra-sound-filling-fill', 'ra-sound-Mute1', 'ra-suspended-fill', 'ra-tool-fill', 'ra-task-management-fill', 'ra-unlock-fill', 'ra-trust-fill', 'ra-vip-fill', 'ra-set1', 'ra-Top-fill', 'ra-viewlarger1', 'ra-voice-fill', 'ra-warning-fill', 'ra-warehouse-fill', 'ra-zip-fill', 'ra-trade-assurance-fill', 'ra-vs-fill', 'ra-video1', 'ra-template-fill', 'ra-wallet1', 'ra-training1', 'ra-packing-labeling-fill', 'ra-Exportservices-fill', 'ra-brand-fill', 'ra-collection', 'ra-consumption-fill', 'ra-collection-fill', 'ra-brand', 'ra-rejected-order-fill', 'ra-homepage-ads-fill', 'ra-homepage-ads', 'ra-scenes-fill', 'ra-scenes', 'ra-similar-product-fill', 'ra-topraning-fill', 'ra-consumption', 'ra-topraning', 'ra-gold-supplier', 'ra-messagecenter-fill', 'ra-quick', 'ra-writing', 'ra-docjpge-fill', 'ra-jpge-fill', 'ra-gifjpge-fill', 'ra-bmpjpge-fill', 'ra-tifjpge-fill', 'ra-pngjpge-fill', 'ra-Hometextile', 'ra-home', 'ra-sendinquiry-fill', 'ra-comments-fill', 'ra-account-fill', 'ra-feed-logo-fill', 'ra-feed-logo', 'ra-home-fill', 'ra-add-select', 'ra-sami-select', 'ra-camera', 'ra-arrow-down', 'ra-account', 'ra-comments', 'ra-cart-Empty1', 'ra-favorites', 'ra-order', 'ra-search', 'ra-trade-assurance', 'ra-usercenter1', 'ra-microphone', 'ra-txt', 'ra-tradingdata', 'ra-xlsx', 'ra-banzhengfuwu', 'ra-cangku', 'ra-daibancaishui', 'ra-jizhuangxiang', 'ra-jiaobiao', 'ra-kehupandian', 'ra-dongtai', 'ra-daikuan', 'ra-shengyijing', 'ra-jiehui', 'ra-fencengpeizhi', 'ra-shenqingjilu', 'ra-shangchuanbeiandanzheng', 'ra-shangchuan', 'ra-kehuquanyi', 'ra-suoxiao', 'ra-quanyipeizhi', 'ra-shuangshen', 'ra-tongguan', 'ra-tuishui', 'ra-tongguanshuju', 'ra-kuaidiwuliu', 'ra-wuliuchanpin', 'ra-waihuishuju', 'ra-xinxibar_shouji', 'ra-xinwaizongyewu', 'ra-wuliudingdan', 'ra-zhongjianren', 'ra-xinxibar_zhanghu', 'ra-yidatong', 'ra-zhuanyequanwei', 'ra-zhanghucaozuo', 'ra-xuanzhuandu', 'ra-tuishuirongzi', 'ra-AddProducts', 'ra-ziyingyewu', 'ra-addcell', 'ra-background-color', 'ra-cascades', 'ra-beijing', 'ra-bold', 'ra-zijin', 'ra-eraser', 'ra-centeralignment', 'ra-click', 'ra-aspjiesuan', 'ra-flag', 'ra-falg-fill', 'ra-Fee', 'ra-filling', 'ra-Foreigncurrency', 'ra-guanliyuan', 'ra-language', 'ra-leftalignment', 'ra-extra-inquiries', 'ra-Italic', 'ra-pcm', 'ra-reducecell', 'ra-rightalignment', 'ra-pointerleft', 'ra-subscript', 'ra-square', 'ra-superscript', 'ra-tag-subscript', 'ra-danjuzhuanhuan', 'ra-Transfermoney', 'ra-under-line', 'ra-xiakuangxian', 'ra-shouqi', 'ra-zhankai', 'ra-tongxunlu', 'ra-yiguanzhugongyingshang', 'ra-goumaipianhao', 'ra-Subscribe', 'ra-becomeagoldsupplier', 'ra-new', 'ra-free', 'ra-cad-fill', 'ra-robot', 'ra-inspection1', 'ra-auto', 'ra-all', 'ra-bussiness-man', 'ra-component', 'ra-code', 'ra-copy', 'ra-dollar', 'ra-history', 'ra-editor', 'ra-data', 'ra-gift', 'ra-integral', 'ra-nav-list', 'ra-pic', 'ra-Notvisible', 'ra-play', 'ra-rising', 'ra-QRcode', 'ra-rmb', 'ra-similar-product', 'ra-Exportservices', 'ra-sendinquiry', 'ra-all-fill', 'ra-favorites-fill', 'ra-integral-fill', 'ra-namecard-fill', 'ra-pic-fill', 'ra-play-fill', 'ra-prompt-fill', 'ra-stop-fill', 'ra-column', 'ra-add-account', 'ra-column1', 'ra-add', 'ra-agriculture', 'ra-years', 'ra-add-cart', 'ra-arrow-right', 'ra-arrow-left', 'ra-apparel', 'ra-all1', 'ra-arrow-up', 'ra-ascending', 'ra-ashbin', 'ra-atm', 'ra-bad', 'ra-attachent', 'ra-browse', 'ra-beauty', 'ra-atm-away', 'ra-assessed-badge', 'ra-auto1', 'ra-bags', 'ra-calendar', 'ra-cart-full', 'ra-calculator', 'ra-cameraswitching', 'ra-cecurity-protection', 'ra-category', 'ra-close', 'ra-certified-supplier', 'ra-cart-Empty', 'ra-code1', 'ra-color', 'ra-conditions', 'ra-confirm', 'ra-company', 'ra-ali-clould', 'ra-copy1', 'ra-credit-level', 'ra-coupons', 'ra-connections', 'ra-cry', 'ra-costoms-alearance', 'ra-clock', 'ra-CurrencyConverter', 'ra-cut', 'ra-data1', 'ra-Customermanagement', 'ra-descending', 'ra-double-arro-right', 'ra-customization', 'ra-double-arrow-left', 'ra-discount', 'ra-download', 'ra-dollar1', 'ra-default-template', 'ra-editor1', 'ra-eletrical', 'ra-electronics', 'ra-etrical-equipm', 'ra-ellipsis', 'ra-email', 'ra-falling', 'ra-earth', 'ra-filter', 'ra-furniture', 'ra-folder', 'ra-feeds', 'ra-history1', 'ra-hardware', 'ra-help', 'ra-good', 'ra-Householdappliances', 'ra-gift1', 'ra-form', 'ra-image-text', 'ra-hot', 'ra-inspection', 'ra-leftbutton', 'ra-jewelry', 'ra-ipad', 'ra-leftarrow', 'ra-integral1', 'ra-kitchen', 'ra-inquiry-template', 'ra-link', 'ra-libra', 'ra-loading', 'ra-listing-content', 'ra-lights', 'ra-logistics-icon', 'ra-messagecenter', 'ra-mobile-phone', 'ra-manage-order', 'ra-move', 'ra-Moneymanagement', 'ra-namecard', 'ra-map', 'ra-Newuserzone', 'ra-multi-language', 'ra-office', 'ra-notice', 'ra-ontimeshipment', 'ra-office-supplies', 'ra-password', 'ra-Notvisible1', 'ra-operation', 'ra-packaging', 'ra-online-tracking', 'ra-packing-labeling', 'ra-phone', 'ra-pic1', 'ra-pin', 'ra-play1', 'ra-logistic-logo', 'ra-print', 'ra-product', 'ra-machinery', 'ra-process', 'ra-prompt', 'ra-QRcode1', 'ra-reeor', 'ra-reduce', 'ra-Non-staplefood', 'ra-rejected-order', 'ra-resonserate', 'ra-remind', 'ra-responsetime', 'ra-return', 'ra-paylater', 'ra-rising1', 'ra-Rightarrow', 'ra-rmb1', 'ra-RFQ-logo', 'ra-save', 'ra-scanning', 'ra-security', 'ra-salescenter', 'ra-seleted', 'ra-searchcart', 'ra-raw', 'ra-service', 'ra-share', 'ra-signboard', 'ra-shuffling-banner', 'ra-Rightbutton', 'ra-sorting', 'ra-sound-Mute', 'ra-Similarproducts', 'ra-sound-filling', 'ra-suggest', 'ra-stop', 'ra-success', 'ra-supplier-features', 'ra-switch', 'ra-survey', 'ra-template', 'ra-text', 'ra-suspended', 'ra-task-management', 'ra-tool', 'ra-Top', 'ra-smile', 'ra-textile-products', 'ra-tradealert', 'ra-topsales', 'ra-tradingvolume', 'ra-training', 'ra-upload', 'ra-RFQ-word', 'ra-viewlarger', 'ra-viewgallery', 'ra-vehivles', 'ra-trust', 'ra-warning', 'ra-warehouse', 'ra-shoes', 'ra-video', 'ra-viewlist', 'ra-set', 'ra-store', 'ra-tool-hardware', 'ra-vs', 'ra-toy', 'ra-sport', 'ra-creditcard', 'ra-contacts', 'ra-checkstand', 'ra-aviation', 'ra-Daytimemode', 'ra-infantmom', 'ra-discounts', 'ra-invoice', 'ra-insurance', 'ra-nightmode', 'ra-usercenter', 'ra-unlock', 'ra-vip', 'ra-wallet', 'ra-landtransportation', 'ra-voice', 'ra-exchangerate', 'ra-contacts-fill', 'ra-add-account1', 'ra-years-fill', 'ra-add-cart-fill', 'ra-add-fill', 'ra-all-fill1', 'ra-ashbin-fill', 'ra-calendar-fill', 'ra-bad-fill', 'ra-bussiness-man-fill', 'ra-atm-fill', 'ra-cart-full-fill', 'ra-cart-Empty-fill', 'ra-cameraswitching-fill', 'ra-atm-away-fill', 'ra-certified-supplier-fill', 'ra-calculator-fill', 'ra-clock-fill', 'ra-ali-clould-fill', 'ra-color-fill', 'ra-coupons-fill', 'ra-cecurity-protection-fill', 'ra-credit-level-fill', 'ra-default-template-fill', 'ra-CurrencyConverter-fill', 'ra-Customermanagement-fill', 'ra-discounts-fill', 'ra-Daytimemode-fill', 'ra-exl-fill', 'ra-cry-fill', 'ra-email-fill', 'ra-filter-fill', 'ra-folder-fill', 'ra-feeds-fill', 'ra-gold-supplie-fill', 'ra-form-fill', 'ra-camera-fill', 'ra-good-fill', 'ra-image-text-fill', 'ra-inspection-fill', 'ra-hot-fill', 'ra-company-fill', 'ra-discount-fill', 'ra-insurance-fill', 'ra-inquiry-template-fill', 'ra-leftbutton-fill', 'ra-integral-fill1', 'ra-help1', 'ra-listing-content-fill', 'ra-logistic-logo-fill', 'ra-Moneymanagement-fill', 'ra-manage-order-fill', 'ra-multi-language-fill', 'ra-logistics-icon-fill', 'ra-Newuserzone-fill', 'ra-nightmode-fill', 'ra-office-supplies-fill', 'ra-notice-fill', 'ra-mute', 'ra-order-fill', 'ra-password1', 'ra-map1', 'ra-paylater-fill', 'ra-phone-fill', 'ra-online-tracking-fill', 'ra-play-fill1', 'ra-pdf-fill', 'ra-phone1', 'ra-pin-fill', 'ra-product-fill', 'ra-rankinglist-fill', 'ra-reduce-fill', 'ra-reeor-fill', 'ra-pic-fill1', 'ra-rankinglist', 'ra-product1', 'ra-prompt-fill1', 'ra-resonserate-fill', 'ra-remind-fill', 'ra-Rightbutton-fill', 'ra-RFQ-logo-fill', 'ra-RFQ-word-fill', 'ra-searchcart-fill', 'ra-salescenter-fill', 'ra-save-fill', 'ra-security-fill', 'ra-Similarproducts-fill', 'ra-signboard-fill', 'ra-service-fill', 'ra-shuffling-banner-fill', 'ra-supplier-features-fill', 'ra-store-fill', 'ra-smile-fill', 'ra-success-fill', 'ra-sound-filling-fill', 'ra-sound-Mute1', 'ra-suspended-fill', 'ra-tool-fill', 'ra-task-management-fill', 'ra-unlock-fill', 'ra-trust-fill', 'ra-vip-fill', 'ra-set1', 'ra-Top-fill', 'ra-viewlarger1', 'ra-voice-fill', 'ra-warning-fill', 'ra-warehouse-fill', 'ra-zip-fill', 'ra-trade-assurance-fill', 'ra-vs-fill', 'ra-video1', 'ra-template-fill', 'ra-wallet1', 'ra-training1', 'ra-packing-labeling-fill', 'ra-Exportservices-fill', 'ra-brand-fill', 'ra-collection', 'ra-consumption-fill', 'ra-collection-fill', 'ra-brand', 'ra-rejected-order-fill', 'ra-homepage-ads-fill', 'ra-homepage-ads', 'ra-scenes-fill', 'ra-scenes', 'ra-similar-product-fill', 'ra-topraning-fill', 'ra-consumption', 'ra-topraning', 'ra-gold-supplier', 'ra-messagecenter-fill', 'ra-quick', 'ra-writing', 'ra-docjpge-fill', 'ra-jpge-fill', 'ra-gifjpge-fill', 'ra-bmpjpge-fill', 'ra-tifjpge-fill', 'ra-pngjpge-fill', 'ra-Hometextile', 'ra-home', 'ra-sendinquiry-fill', 'ra-comments-fill', 'ra-account-fill', 'ra-feed-logo-fill', 'ra-feed-logo', 'ra-home-fill', 'ra-add-select', 'ra-sami-select', 'ra-camera', 'ra-arrow-down', 'ra-account', 'ra-comments', 'ra-cart-Empty1', 'ra-favorites', 'ra-order', 'ra-search', 'ra-trade-assurance', 'ra-usercenter1', 'ra-microphone', 'ra-txt', 'ra-tradingdata', 'ra-xlsx', 'ra-banzhengfuwu', 'ra-cangku', 'ra-daibancaishui', 'ra-jizhuangxiang', 'ra-jiaobiao', 'ra-kehupandian', 'ra-dongtai', 'ra-daikuan', 'ra-shengyijing', 'ra-jiehui', 'ra-fencengpeizhi', 'ra-shenqingjilu', 'ra-shangchuanbeiandanzheng', 'ra-shangchuan', 'ra-kehuquanyi', 'ra-suoxiao', 'ra-quanyipeizhi', 'ra-shuangshen', 'ra-tongguan', 'ra-tuishui', 'ra-tongguanshuju', 'ra-kuaidiwuliu', 'ra-wuliuchanpin', 'ra-waihuishuju', 'ra-xinxibar_shouji', 'ra-xinwaizongyewu', 'ra-wuliudingdan', 'ra-zhongjianren', 'ra-xinxibar_zhanghu', 'ra-yidatong', 'ra-zhuanyequanwei', 'ra-zhanghucaozuo', 'ra-xuanzhuandu', 'ra-tuishuirongzi', 'ra-AddProducts', 'ra-ziyingyewu', 'ra-addcell', 'ra-background-color', 'ra-cascades', 'ra-beijing', 'ra-bold', 'ra-zijin', 'ra-eraser', 'ra-centeralignment', 'ra-click', 'ra-aspjiesuan', 'ra-flag', 'ra-falg-fill', 'ra-Fee', 'ra-filling', 'ra-Foreigncurrency', 'ra-guanliyuan', 'ra-language', 'ra-leftalignment', 'ra-extra-inquiries', 'ra-Italic', 'ra-pcm', 'ra-reducecell', 'ra-rightalignment', 'ra-pointerleft', 'ra-subscript', 'ra-square', 'ra-superscript', 'ra-tag-subscript', 'ra-danjuzhuanhuan', 'ra-Transfermoney', 'ra-under-line', 'ra-xiakuangxian', 'ra-shouqi', 'ra-zhankai', 'ra-tongxunlu', 'ra-yiguanzhugongyingshang', 'ra-goumaipianhao', 'ra-Subscribe', 'ra-becomeagoldsupplier', 'ra-new', 'ra-free', 'ra-cad-fill', 'ra-robot', 'ra-inspection1'
      ]
    }
  },
  methods: {
    onselected(name) {
      this.localValue = name
      this.$emit('update:modelValue', this.localValue)
      this.$refs.popover.hide()
    },
    focus() {
      // this.$refs.popover.show()
    }
  }
}
</script>
<style lang="scss" scoped>
  .icon-cell {
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-size: 32px;
    display: block;
    color: #606266;
    transition: color .15s linear;
    &:hover {
      color: cornflowerblue;
      border: 1px solid cornflowerblue;
    }
    &.active {
      color: cornflowerblue;
      border: 1px solid cornflowerblue;
    }
  }
</style>
